<template>
	<!-- 占位 -->
	<view style="position: fixed;" :style="{'bottom': bottom+'rpx'}">
		<u-tabbar @change="change" height="148rpx" active-color="#fff" inactive-color="#fff" :border-top="false"
			v-model="props.current" :list="parames.tabs" bgColor="rgba(0,0,0,0.6)"
			activeStyle='padding: 20rpx 5rpx;border-bottom: 1px solid #fff' />
	</view>
</template>
<script lang="ts" setup>
	import {
		reactive, onMounted, ref
	} from 'vue'
	import {

	} from '@dcloudio/uni-app'
	import user from '../api/user.js';
	interface Props {
		current ?: number | string
	}
	const props = withDefaults(defineProps<Props>(), {
		current: 0
	})
	let bottom = ref(0)
	let parames = reactive({
		tabs: [
			{
				text: '首页',
				pagePath: "/pages/tabs/home/index"
			},
			{
				text: '排名',
				pagePath: "/pages/tabs/ranking"
			},
			{
				text: 'LUXUR ELITE',
				pagePath: "/pages/tabs/networking/index"
			},
			{
				text: '消息',
				pagePath: "/pages/tabs/msg/index",
				count: 0,
			},
			{
				text: '我的',
				pagePath: "/pages/tabs/me/index"
			}
		],
		index: 0
	})

	
	const setBadge = (i, count) => {
		if (!i) return
		parames.tabs[i].count = count || 0
	}
	const change = (e : any) => {
		parames.index = e
	}
	const messageReadAndGetNum = async () => {
		const res = await user.messageReadAndGetNum({
			flag: 1
		})
		if(res.code !== 200) return
		uni.setStorageSync('msg',res.data)
		setBadge(3, res.data.total)
	}
	onMounted(() => {
		uni.getSystemInfo({
			success(res) {
				bottom.value = res.safeArea.height - res.safeArea.bottom
			}
		})
		if(props.current == 3) return
		if (!uni.getStorageSync('token')) return
		messageReadAndGetNum()
	})
	defineExpose({
		setBadge
	})
</script>

<style lang="scss" scoped>
	/* .active {
		border-bottom: 2rpx solid #FFFFFF !important;
		padding: 20rpx 5rpx;
	} */
</style>